<template>
  <div>
    <!-- 按条件搜索框-->
    <!-- :model="selectOrder" -->
    <el-form :inline="true" class="demo-form-inline"
        :data="selectOrder"
        :rules="rules"
        label-width="100px"
        ref="selectOrder"
    >
      <el-form-item label="信息来源">
      <el-input v-model="selectOrder.source"></el-input>
      </el-form-item>
      <el-form-item label="事件等级">
        <el-select v-model="selectOrder.eventId" placeholder="请选择">
          <el-option
              v-for="event in events"
              :label="event.name"
              :value="event.id"
              :key="event.id"
            >
            </el-option>
        
        </el-select>
      </el-form-item>
      <el-form-item label="反应人">
        <el-input v-model="selectOrder.reflectPeople"></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="selectOrder.phone"></el-input>
      </el-form-item>
      <el-form-item label="反应单位">
        <el-input v-model="selectOrder.reflectUnit"></el-input>
      </el-form-item>
      <el-form-item label="反应区域">
        <el-input v-model="selectOrder.reflectArea"></el-input>
      </el-form-item>
      <el-form-item label="发生时间">
        <el-date-picker
          v-model="selectOrder.happenDate"
          type="datetime"
          placeholder="Select date and time"
           value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="发生地点">
        <el-input v-model="selectOrder.happenArea"></el-input>
      </el-form-item>
      <el-form-item label="截止时间">
        <el-date-picker
          v-model="selectOrder.endDate"
          type="datetime"
          placeholder="Select date and time"
           value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addOrder">添加工单</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="exportExcel">导出数据</el-button>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格-->
    <template>
      <div class="tem">
      <el-table :data="repairData" style="width: 100%;text-align: center;" max-height="1000" class="table" id="table" stripe border >
        <el-table-column fixed  type="index"  label="编号" width="120">
        <template slot-scope="scope">
              <span>
                {{ scope.$index + (pageIndex - 1) * 4 + 1 }}
              </span>
        </template>
        </el-table-column>
        <!-- <el-table-column prop="id" label="编号" width="120"> </el-table-column> -->
        <el-table-column prop="source" label="信息来源" width="120">
        </el-table-column>
        <el-table-column prop="reflectClass" label="反应类别" width="120">
        </el-table-column>
        <el-table-column prop="reflectPeople" label="反应人" width="120">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="120">
        </el-table-column>
        <el-table-column prop="email" label="电子邮件" width="150">
        </el-table-column>
        <el-table-column prop="reflectUnit" label="反应单位" width="120">
        </el-table-column>
        <el-table-column prop="reflectArea" label="反应区域" width="120">
        </el-table-column>
         <el-table-column prop="reflectContent" label="反应内容" width="120">
        </el-table-column>
        <el-table-column prop="happenDate" label="发生日期" width="200">
        </el-table-column>
        <el-table-column prop="endDate" label="截止日期" width="200">
        </el-table-column>
        <el-table-column prop="happenArea" label="发生地点" width="120">
        </el-table-column>
        <el-table-column prop="eventName" label="事件等级" width="120">
        </el-table-column>
        <!-- <el-table-column prop="isFeedback" label="是否反馈" width="120">
        </el-table-column> -->
        <el-table-column prop="stateName" label="状态" width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="updateRow(scope.row)"
              type="primary"
        
              value="修改"
              >修改
            </el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.row.id)"
              type="warning"
              value="删除"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
       </div>
    </template>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="4"
      @current-change="change"
    >
    </el-pagination>

    <!-- 添加对话框 -->
    
    <el-dialog title="添加工单" :visible.sync="dialogAddVisible">
      <el-form
        :model="addOneOrder"
        label-width="100px"
        ref="addOneOrder"
        :rules="addRules"
      >
        
        <el-row>
          <el-col :span="10">
                 <el-form-item label="反应人" prop="reflectPeople">
          <el-input v-model="addOneOrder.reflectPeople" style="width:300px"></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="10">
               <el-form-item label="信息来源" prop="source">
          <el-input v-model="addOneOrder.source" style="width:300px"></el-input>
        </el-form-item>
          </el-col>
        </el-row>
          <el-row>
          <el-col :span="10">
             <el-form-item label="电话" prop="phone">
          <el-input v-model="addOneOrder.phone" style="width:300px"></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="邮件" prop="email">
          <el-input v-model="addOneOrder.email" style="width:300px"></el-input>
        </el-form-item>
          </el-col>
        </el-row>
          <el-row>
          <el-col :span="10">
                <el-form-item label="反映单位" prop="reflectUnit">
          <el-input v-model="addOneOrder.reflectUnit" style="width:300px"></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="10">
              <el-form-item label="反应区域" prop="reflectArea">
          <el-input v-model="addOneOrder.reflectArea" style="width:300px"></el-input>
        </el-form-item>
          </el-col>
        </el-row>
          <el-row>
          <el-col :span="10">
                
        <el-form-item label="反映内容" prop="reflectContent">
          <el-input v-model="addOneOrder.reflectContent" style="width:300px"></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="10">
                 <el-form-item label="反应类型" prop="reflectClass">
          <el-select v-model="addOneOrder.reflectClass" placeholder="请选择">
            <el-option label="低" value="低"></el-option>
            <el-option label="中" value="中"></el-option>
            <el-option label="高" value="高"></el-option>
          </el-select>
        </el-form-item>
          </el-col>
        </el-row>
          <el-row>
          <el-col :span="10">
               <el-form-item label="发生日期" prop="happenDate">
           <el-date-picker
          v-model="addOneOrder.happenDate"
          type="datetime"
          placeholder="Select date and time"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
        </el-form-item>
          </el-col>
          <el-col :span="10">
                    <el-form-item label="发生地点" prop="happenArea">
          <el-input v-model="addOneOrder.happenArea" style="width:300px"></el-input>
        </el-form-item>
          </el-col>
        </el-row>
          <el-row>
          <el-col :span="10">
                    <el-form-item label="事件等级" prop="eventId">
          <el-select v-model="addOneOrder.eventId" placeholder="请选择">
            <el-option
              v-for="event in events"
              :label="event.name"
              :value="event.id"
              :key="event.id"
              
            >
            </el-option>
          </el-select>
        </el-form-item>
          </el-col>
          <el-col :span="10">
                <el-form-item label="截止日期" prop="endDate">
           <el-date-picker
          v-model="addOneOrder.endDate"
          type="datetime"
          placeholder="Select date and time"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
        </el-form-item> 
          </el-col>
        </el-row>
          <el-row>
          <el-col :span="10">
               <el-form-item label="状态" prop="state" v-show="false">
          <el-input v-model="addOneOrder.state">1</el-input>
        </el-form-item>
          </el-col>
          <el-col :span="10"></el-col>
        </el-row>
       </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加修改页面弹出框 -->
    <el-dialog title="添加用户" :visible.sync="dialogUpdateVisible">
      <el-form
        :model="updateOneOrder"
        :rules="rules"
        label-width="100px"
        ref="updateOneOrder"
      >
      <el-row>
        <el-col :span="10">
        </el-col>
        <el-col :span="10">
                  <el-form-item label="反应人" prop="reflectPeople">
          <el-input v-model="updateOneOrder.reflectPeople"></el-input>
        </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          
        <el-form-item label="信息来源" prop="source">
          <el-input v-model="updateOneOrder.source"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="10">
                  <el-form-item label="电话" prop="phone">
          <el-input v-model="updateOneOrder.phone"></el-input>
        </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          
        <el-form-item label="邮件" prop="email">
          <el-input v-model="updateOneOrder.email"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="10">
                  <el-form-item label="反应区域" prop="reflectArea">
          <el-input v-model="updateOneOrder.reflectArea"></el-input>
        </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          
        <el-form-item label="反应类型" prop="reflectClass">
          <el-input v-model="updateOneOrder.reflectClass"></el-input>
          <!-- <el-select v-model="updateOneOrder.reflectClass" placeholder="请选择">
            <el-option label="低" value="低"></el-option>
            <el-option label="中" value="中"></el-option>
            <el-option label="高" value="高"></el-option>
          </el-select> -->
        </el-form-item>
        </el-col>
        <el-col :span="10">
          

        <el-form-item label="发生日期" prop="happenDate">
          <el-date-picker type="datetime" v-model="updateOneOrder.happenDate" placeholder="Select date and time" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          <!-- <el-input  type="datetime" v-model="updateOneOrder.happenDate" ></el-input> -->
        </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
                  <el-form-item label="发生地点" prop="happenArea">
          <el-input v-model="updateOneOrder.happenArea"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="10">
                  <el-form-item label="事件等级" prop="eventId">
          <el-select v-model="updateOneOrder.eventId" placeholder="请选择">
            <el-option
              v-for="event in events"
              :label="event.name"
              :value="event.id"
              :key="event.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
                  <el-form-item label="截止日期" prop="endDate">
            <el-date-picker type="datetime" v-model="updateOneOrder.endDate" placeholder="Select date and time" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>

          <!-- <el-input type="datetime" v-model="updateOneOrder.endDate"></el-input> -->
        </el-form-item>
        </el-col>
        <el-col :span="10">
                  <el-form-item label="指派负责人员" prop="userId">
          <el-select v-model="updateOneOrder.userId" placeholder="请选择">
            <el-option
              v-for=" user in users"
              :label="user.name"
              :value="user.id"
              :key="user.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          
        <el-form-item label="状态" prop="state" v-show="false">
          <el-input v-model="updateOneOrder.state">1</el-input>
        </el-form-item>
        </el-col>
        <el-col :span="10"></el-col>
      </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateVisible = false">取 消</el-button>
        <el-button type="primary" @click="update(updateOneOrder)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>



<script>
import axios from 'axios';
import FileSaver from "file-saver";
import XLSX from "xlsx";

export default {
  data() {
    return {
        selectOrder:{
            state:1,
             source:"",
              eventId:"",
              reflectPeople:"",
              phone:"",
              reflectUnit:"",
              reflectArea:"",
              pappenArea:"",
              pageIndex:'',
              happenDate:'',
              endDate:''
        },
        
        
         pickerOptions1: {
          shortcuts: [{
            text: 'Today',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: 'Yesterday',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: 'A week ago',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        // happenDate: '',
        // endDate: '',
        repairData:[],
        pageIndex:1,
        total:0,
        dialogAddVisible:false,
        addOneOrder:{},
        dialogUpdateVisible:false,
        updateOneOrder:{
           id:0,
           reflectPeople:'',
           source:'',
           phone:'',
           email:'',
           reflectUnit:'',
           reflectArea:'',
           reflectClass:'',
           happenDate:'',
           happenArea:'',
           eventId:0,
           endDate:'',
           state:''
        },
        events:{},
        users:{},
        rules:{
             reflectPeople:[
            { required: true, message: '反映人不能为空', trigger: 'blur' },
          ],
          source:[
            { required: true, message: '信息来源不能为空', trigger: 'blur' },
          ],
          phone:[
            {required: true, message: '手机号不能为空', trigger: 'blur'},
          ],
          email:[
            { required: true, message: '邮箱不能为空', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ],
          reflectArea:[
            { required: true, message: '反应地区不能为空', trigger: 'blur' },
          ],
          reflectContent:[
            { required: true, message: '反应内容不能为空', trigger: 'blur' },
          ],
          eventId:[
            { required: true, message: '事件等级不能为空', trigger: 'blur' },
          ],
          endDate:[
            { required: true, message: '截至日期不能为空', trigger: 'blur' },
          ],
          happenArea:[
             { required: true, message: '发生地点不能为空', trigger: 'blur' },
          ],
        },
        addRules:{
          reflectPeople:[
            { required: true, message: '反映人不能为空', trigger: 'blur' },
          ],
          source:[
            { required: true, message: '信息来源不能为空', trigger: 'blur' },
          ],
          phone:[
            {required: true, message: '手机号不能为空', trigger: 'blur'},
          ],
          email:[
            { required: true, message: '邮箱不能为空', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ],
          reflectArea:[
            { required: true, message: '反应地区不能为空', trigger: 'blur' },
          ],
          reflectContent:[
            { required: true, message: '反应内容不能为空', trigger: 'blur' },
          ],
          eventId:[
            { required: true, message: '事件等级不能为空', trigger: 'blur' },
          ],
          endDate:[
            { required: true, message: '截至日期不能为空', trigger: 'blur' },
          ],
          happenArea:[
             { required: true, message: '发生地点不能为空', trigger: 'blur' },
          ],
        }
      }
    },
     
  methods:{
    //按条件查询
    onSubmit(){
      this.getAll();
    },
     //修改当前页码
    change(currentPage) {
      this.pageIndex = currentPage;
       this.getAll();
    },
    //查询用户
    getAll(){
      this.selectOrder.pageIndex=this.pageIndex;
      // console.log(this.selectOrder);
       this.axios.post("/worker/list",this.selectOrder,
      
       ).then(res=>{
        //  console.log(res.data.data);
         this.pageIndex=res.data.data.pageNum;
         this.total=res.data.data.total;
         this.repairData=res.data.data.list;
        //  this.pageIndex=
       })
    },
    //查询所有事件
    getAllEvent(){
        this.axios.get("/event/list").then(res=>{
            // console.log(res);
            this.events=res.data.data;
        })
    },
    //查询所有角色
    getAllUsers(){
      this.axios.get("/user/repair").then(res=>{
        //  console.log(res);
         this.users=res.data.data;
      })
    },
    //弹出添加用户框
    addOrder(){
       this.dialogAddVisible=true;
    },
    //add添加
    add(){
        console.log(this.addOneOrder);
       this.axios.post("/repair/add",this.addOneOrder).then(res=>{
         if(res.data.code==200){
         this.dialogAddVisible=false;
         this.$message({
           message:'添加成功',
           type:'success'
         })
         this.getAll();
         }
       })
    },
    //删除用户
    deleteRow(id){
      this.$confirm("是否删除","提示",{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
      }).then(()=>{
               this.axios.get("/repair/delete",{
         params:{
           id:id
         }
       }).then(res=>{
          if(res.data.code==200){
            this.$message({
              message:'删除成功',
              type:'success'
            })
           this.getAll();
         }
       })
      }).catch(()=>{
        
      })



    },
    //弹出修改框并回显
    updateRow(repair){
          this.updateOneOrder.id=repair.id,
           this.updateOneOrder.reflectPeople=repair.reflectPeople,
           this.updateOneOrder.source=repair.source,
          this.updateOneOrder.phone=repair.phone,
          this.updateOneOrder.email=repair.email,
           this.updateOneOrder.reflectUnit=repair.reflectUnit,
           this.updateOneOrder.reflectArea=repair.reflectArea,
          this.updateOneOrder.reflectClass=repair.reflectClass,
           this.updateOneOrder.happenDate=repair.happenDate,
           this.updateOneOrder.happenArea=repair.happenArea,
          this.updateOneOrder.eventId=repair.eventId,
           this.updateOneOrder.endDate=repair.endDate,
           this.updateOneOrder.state=repair.state,
        this.updateOneOrder.stateName=repair.stateName,
         this.dialogUpdateVisible=true;
    },
    //update
     update(){
     this.$refs.updateOneOrder.validate((valid) => {
          if(valid){
                 this.axios.post("/repair/update",this.updateOneOrder).then(res=>{
          if(res.data.code==200){
           this.dialogUpdateVisible=false;
           this.getAll();
              this.$message({
              message:'修改成功',
              type:'success'
            })
         }
      })
          }else{
            this.$message({
              message:'请填入信息',
              type:'error'
            })
          }
       })



    },
     // 导出表格所用
     exportExcel() {
     import('@/utils/Export2Excel').then(excel => {
						  const tHeader = ['编号','信息来源','反应类别','反应人','联系电话','电子邮件','反应单位','反应区域','反应内容','发生日期','截止日期','发生地点','事件等级','状态']; // 表头数据
						  const filterVal = ['id','source','reflectClass','reflectPeople','phone','email','reflectUnit','reflectArea','reflectContent','happenDate','endDate','happenArea','eventName','state'];//对应的字段名
						  const list = this.repairData;
						  const data = this.formatJson(filterVal, list)
						  excel.export_json_to_excel(tHeader,data,'工单列表')
						})
				  },
				  formatJson(filterVal, jsonData) {
					return jsonData.map(v => filterVal.map(j => {
					  return v[j]
					}))
      },

    reset(){
        this.selectOrder.source='';
        this.selectOrder.eventId='';
        this.selectOrder.reflectPeople='';
        this.selectOrder.phone='';
        this.selectOrder.reflectUnit='';
        this.selectOrder.reflectArea='';
        this.selectOrder.pappenArea='';
        this.selectOrder.pageIndex='';
        this.selectOrder.happenDate='';
        this.selectOrder.endDate='';
        this.getAll();
        
    }
  },
  created(){
  this.getAllUsers();
  this.getAllEvent();
   this.getAll();
  }
};
</script>

<style scoped>
.myinput{
  width: 200px;
  text-align: center;
}

</style>
